<!--
 * @Description: 罐车调度
 * @Autor: wangwangwang
 * @Date: 2021-03-30 16:26:14
 * @LastEditors: wangwangwang
 * @LastEditTime: 2021-06-21 17:21:05
-->
<template>
  <div class="pages_content table">
    <el-container>
      <el-header>
        <breaDcrumb />
      </el-header>
      <el-main style="display: flex">
        <div>
          <div class="header_right" @click="showCardNav = !showCardNav">
            <div class="title">搜索</div>
            <div>
              <div :class="{ 'arrowTransform': !showCardNav, 'arrowTransformReturn': showCardNav}">
                <i style="margin-right: 5px" class="el-icon-arrow-down"></i>
              </div>
            </div>
          </div>
          <div v-show="showCardNav" class="hr"></div>
          <el-collapse-transition>
            <div v-show="showCardNav">
              <div class="search">
                <span style="display: inline-block;margin-bottom: 10px;">
                  <span style="margin-right: 12px">车牌号</span>
                  <el-input v-model="tableParam.plateNumber" style="width: 240px" clearable />
                </span>
                <span style="margin-left: 24px">
                  <span style="margin-right: 12px">站点名称</span>
                  <el-input v-model="tableParam.stationName" style="width: 240px" clearable />
                </span>
                <span style="margin-left: 24px;">
                  <span style="margin-right: 12px;">状态</span>
                  <el-select v-model="tableParam.carStatus" style="width: 200px;max-width: 150px;" placeholder="请选择">
                    <el-option v-for="(item, index) in carType" :key="index+1" :label="item" :value="index+1"></el-option>
                  </el-select>
                </span>
                <el-button icon="el-icon-search" size="medium" class="bottom_all" @click="(tableParam.page = 1), initData()">查 询</el-button>
                <el-button size="medium" class="bottom_all_two" style="margin-left: 12px" @click="init()">重 置</el-button>
              </div>
            </div>
          </el-collapse-transition>
          <div class="hr"></div>
          <div class="card">
            <div class="card_nav">
              <div>
                <el-button size="small" class="bottom_all" style="margin-left: 0" @click="changeCarType">
                  批量改状态
                </el-button>
                <el-button size="small" class="bottom_one" @click="handleTask(), taskVisible=true">
                  泵机任务
                </el-button>
              </div>
            </div>
            <div v-loading="tableLoading" class="card_info" :style="style">
              <el-table :header-cell-style="{ background: '#f3f6f9' }" :cell-style="{ borderRight: 'none' }" border stripe style="width: 100%" :data="tableDataSource" tooltip-effect="dark" @selection-change="handleSelectionChange">
                <el-table-column align="center" type="selection"></el-table-column>
                <el-table-column label="车辆自编号" prop="code"></el-table-column>
                <el-table-column label="车牌号" prop="plateNumber"></el-table-column>
                <el-table-column label="车辆类型" prop="carTypeName"></el-table-column>
                <el-table-column label="所属单位" prop="company"></el-table-column>
                <el-table-column label="站点名称" prop="stationName"></el-table-column>
                <el-table-column label="临时站点" prop="temporaryStation"></el-table-column>
                <el-table-column label="最大载重（方）" prop="maxLoad"></el-table-column>
                <el-table-column label="皮重（吨）" prop="tare"></el-table-column>
                <el-table-column label="二维码" prop="quickMarkUrl" width="100">
                  <template slot-scope="scope">
                    <a v-if="scope.row.quickMarkUrl" class="table_link" :href="'/file/' +scope.row.quickMarkUrl" download>下载二维码</a>
                  </template>
                </el-table-column>
                <el-table-column label="状态" prop="carStatus">
                  <template slot-scope="scope">
                    {{carType[scope.row.carStatus*1-1]}}
                  </template>
                </el-table-column>
                <el-table-column label="更新时间" prop="updateTime"></el-table-column>
                <el-table-column label="当前绑定司机" prop="userName"></el-table-column>
                <el-table-column label="操作" align="center" width="300">
                  <template slot-scope="scope">
                    <el-button size="mini" class="bottom_one" @click="handleSubmit(scope.row)">调度</el-button>
                    <el-button size="mini" class="bottom_one" @click="handleHistory(scope.row)">调度历史</el-button>
                    <el-button v-if="scope.row.userName" size="mini" class="bottom_one" @click="handleCancel(scope.row)">取消绑定</el-button>
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </div>
        </div>
      </el-main>
      <div class="card_bottom">
        <div class="card_bottom_left">
          <div class="top_page_totle">总共{{ total }}条</div>
          <el-pagination :current-page.sync="tableParam.page" :page-size="tableParam.pageSize" :page-sizes="[10, 20, 30, 40,50,100,200,500,1000]" layout="prev,pager,sizes,next,jumper" :total="total" @size-change="sizeChange" @current-change="initData()"></el-pagination>
        </div>
        <div>
          <el-button size="mini" icon="el-icon-refresh-right" class="bottom_all_two" @click="initData">刷新</el-button>
        </div>
      </div>
    </el-container>
    <el-dialog v-dialogDrag :visible.sync="changeVisible" width="500px" :close-on-click-modal="false">
      <span slot="title" class="dialog-title">批量修改状态</span>
      <div class="dialoginfo">
        <el-form :inline="true" label-width="110px">
          <el-form-item>
            <span slot="label">状态</span>
            <el-select v-model="carStatus" placeholder="请选择">
              <el-option v-for="(item, index) in carType" :key="index+1" :label="item" :value="index+1"></el-option>
            </el-select>
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button class="bottom_all_two" @click="changeVisible=false">取 消</el-button>
        <el-button class="bottom_all" style="margin-left: 24px" @click="sureSubmit()">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog v-dialogDrag :visible.sync="historyVisible" width="90%" :close-on-click-modal="false">
      <span slot="title" class="dialog-title">调度历史</span>
      <div class="dialoginfo">
        <el-table :header-cell-style="{ background: '#f3f6f9' }" :cell-style="{ borderRight: 'none' }" border stripe style="width: 100%" :data="historyList" tooltip-effect="dark">
          <el-table-column label="原车牌号" prop="oldCarNo"></el-table-column>
          <el-table-column label="类型" prop="dispatchType">
            <template slot-scope="scope">
              {{['','换车调度','临时调度'][scope.row.dispatchType*1]}}
            </template>
          </el-table-column>
          <el-table-column label="调度站点" prop="dispatchStation"></el-table-column>
          <el-table-column label="工程名称" prop="engineeringName"></el-table-column>
          <el-table-column label="工程地址" prop="engineeringAddress"></el-table-column>
          <el-table-column label="浇筑部位" prop="structuralParts"></el-table-column>
          <el-table-column label="物流号" prop="logisticsCode"></el-table-column>
          <el-table-column label="接料车辆" prop="newCarNo"></el-table-column>
          <el-table-column label="接料量" prop="num"></el-table-column>
          <el-table-column label="接料车辆地址" prop="recAddress"></el-table-column>
          <el-table-column label="申报地址" prop="declareAddress"></el-table-column>
          <el-table-column label="备注" prop="remark"></el-table-column>
          <el-table-column label="调度时间" prop="createTime"></el-table-column>
          <el-table-column label="操作人" prop="createUserId"></el-table-column>
        </el-table>
        <div class="card_bottom">
          <div class="card_bottom_left">
            <el-pagination :current-page.sync="page2" :total="total2" :page-size="10" layout="prev, pager, next, jumper" @current-change="initHistoryData()"></el-pagination>
          </div>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button class="bottom_all_two" @click="historyVisible=false">取 消</el-button>
      </span>
    </el-dialog>
    <el-dialog v-dialogDrag :visible.sync="taskVisible" width="90%" :close-on-click-modal="false">
      <span slot="title" class="dialog-title">泵机任务</span>
      <div class="dialoginfo">
        <el-table :header-cell-style="{ background: '#f3f6f9' }" :cell-style="{ borderRight: 'none' }" border stripe style="width: 100%" :data="taskList" tooltip-effect="dark">
          <el-table-column label="泵机调度类型" prop="dispatchType"></el-table-column>
          <el-table-column label="工程名称" prop="engineeringName"></el-table-column>
          <el-table-column label="工程地址" prop="address"></el-table-column>
          <el-table-column label="浇筑部位" prop="structuralParts"></el-table-column>
          <el-table-column label="泵机编号" prop="engineeringAddress"></el-table-column>
          <el-table-column label="泵类型" prop="pumpType"></el-table-column>
          <el-table-column label="生成时间" prop="createTime"></el-table-column>
          <el-table-column label="泵机调度描述" prop="remark"></el-table-column>
          <el-table-column label="调度车辆" prop="dispatchCar"></el-table-column>
          <el-table-column label="罐车调度备注" prop="dispatchRemark"></el-table-column>
          <el-table-column label="调度时间" prop="dispatchTime"></el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button size="mini" class="bottom_one" @click="handleSubmit2(scope.row)">调度</el-button>
            </template>
          </el-table-column>
        </el-table>
        <div class="card_bottom">
          <div class="card_bottom_left">
            <el-pagination :current-page.sync="page3" :total="total3" :page-size="10" layout="prev, pager, next, jumper" @current-change="handleTask()"></el-pagination>
          </div>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button class="bottom_all_two" @click="taskVisible=false">取 消</el-button>
      </span>
    </el-dialog>
    <el-dialog v-dialogDrag :visible.sync="dispatchVisible" width="500px" :close-on-click-modal="false">
      <span slot="title" class="dialog-title">调度</span>
      <div class="dialoginfo">
        <el-form ref="form1" :model="dispatchForm" :rules="rules" label-width="110px">
          <el-form-item prop="carStatus">
            <span slot="label">调度车辆状态</span>
            <el-select v-model="dispatchForm.carStatus" multiple placeholder="请选择" @change="changeStatus">
              <el-option v-for="(item, index) in carType" :key="index+1" :label="item" :value="index+1"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item prop="dispatchCar">
            <span slot="label">调度车辆</span>
            <el-select v-model="dispatchForm.dispatchCar" filterable placeholder="请选择">
              <el-option v-for="item in carList" :key="item.id" :label="item.plateNumber" :value="item.plateNumber"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <span slot="label">罐车备注</span>
            <el-input v-model="dispatchForm.dispatchRemark" type="textarea"></el-input>
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button class="bottom_all_two" @click="dispatchVisible=false">取 消</el-button>
        <el-button class="bottom_all" @click="dispatchSubmit">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog v-dialogDrag :visible.sync="dispatchVisible2" width="500px" :close-on-click-modal="false">
      <span slot="title" class="dialog-title">调度</span>
      <div class="dialoginfo">
        <el-form ref="form2" :rules="rules2" :model="dispatchForm2" label-width="110px">
          <el-form-item prop="dispatchType">
            <span slot="label">类型</span>
            <el-select v-model="dispatchForm2.dispatchType" placeholder="请选择">
              <el-option label="换车转料" :value="1"></el-option>
              <el-option label="临时调度" :value="2"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item v-show="dispatchForm2.dispatchType===1" prop="logisticsCode" :rules="[{ required: dispatchForm2.dispatchType===1, message: '请选择车辆物流', trigger: 'blur' }]">
            <span slot="label">车辆物流</span>
            <el-select v-model="dispatchForm2.logisticsCode" filterable placeholder="请选择">
              <el-option v-for="item in logisticsList" :key="item.code" :label="`${item.code}(${item.engineeringName})`" :value="item.code"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item v-show="dispatchForm2.dispatchType===1" prop="carStatus" :rules="[{ required: dispatchForm2.dispatchType===1, message: '请选择车辆状态', trigger: 'blur' }]">
            <span slot="label">接料车辆状态</span>
            <el-select v-model="dispatchForm2.carStatus" multiple placeholder="请选择" @change="changeStatus">
              <el-option v-for="(item, index) in carType" :key="index+1" :label="item" :value="index+1"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item v-show="dispatchForm2.dispatchType===1" prop="newCarNo" :rules="[
          { required: dispatchForm2.dispatchType===1, message: '请选择车辆', trigger: 'blur' },
          ]">
            <span slot="label">接料车辆</span>
            <el-select v-model="dispatchForm2.newCarNo" placeholder="请选择">
              <el-option v-for="item in carList" :key="item.id" :label="item.plateNumber" :value="item.plateNumber"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item v-show="dispatchForm2.dispatchType===1">
            <span slot="label">接料量</span>
            <el-input v-model="dispatchForm2.num"></el-input>
          </el-form-item>
          <el-form-item v-show="dispatchForm2.dispatchType===1">
            <span slot="label">接料车辆地址</span>
            <div></div>
          </el-form-item>
          <el-form-item v-show="dispatchForm2.dispatchType===1">
            <span slot="label">申报地址</span>
            <div></div>
          </el-form-item>
          <el-form-item v-show="dispatchForm2.dispatchType===1">
            <span slot="label">备注</span>
            <el-input v-model="dispatchForm2.remark" type="textarea"></el-input>
          </el-form-item>
          <el-form-item v-show="dispatchForm2.dispatchType===2" prop="dispatchStationId" :rules="[{ required: dispatchForm2.dispatchType===2, message: '请选择站点'}]">
            <span slot="label">调度站点</span>
            <el-select v-model="dispatchForm2.dispatchStationId" placeholder="请选择">
              <el-option v-for="item in stationIdlist" :key="item.id" :label="item.name" :value="item.id"></el-option>
            </el-select>
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button class="bottom_all_two" @click="dispatchVisible2=false">取 消</el-button>
        <el-button class="bottom_all" @click="dispatchSubmit2">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import mixin from "@/mixins/ICPSmixin.js";
import { getCarList, queryTankerRecord, batchUpdateStatus, getTaskList, queryCarListByStatus, dispatchCar, queryLogisticsByCarNo, handleDispatch, cancelBingding } from "@/api/smart/schedul/carDispatch";
import { getUserAutList } from "@/api/common.js";

export default {
  mixins: [mixin],
  data() {
    return {
      /*表格增删改查及下载接口*/
      /*表格数据*/
      pagesType: 0,
      fromDate: {
        code: "",
      },
      dispatchForm: {
        carStatus: '',
        dispatchCar: '',
        dispatchRemark: '',
      },
      dispatchForm2: {
      },
      carType: ['离线中','等待中', '排队中', '生产中', '检验中', '运输中', '已到场', '浇筑中', '无余料返场中', '有余料返厂中', '故障中','保养中'],
      tableDataSource: [],
      historyList: [],
      total: 0,
      total2: 0,
      historyVisible: false,
      changeVisible: false,
      page2: 1,
      page3: 1,
      total3: 0,
      carId: '',
      carStatus: '',
      selectRow: [],
      taskVisible: false,
      dispatchVisible: false,
      dispatchVisible2: false,
      taskList: [],
      taskRow: {},
      carList: [],
      logisticsList: [],
      stationIdlist: [],
      rules: {
        carStatus: [
          { required: true, message: "请输入调度车辆状态", trigger: "blur" },
        ],
        dispatchCar: [
          { required: true, message: "请输入调度车辆", trigger: "blur" },
        ],
      },
      rules2: {
        dispatchType: [
          { required: true, message: "请选择类型", trigger: "blur" },
        ],
      },
    };
  },
  async created() {
    /*存储拷贝的原初始化fromDate数据*/
    this.stationIdlist = await getUserAutList(true)
    this.stationIdlist.unshift({name: '无', id: '-10000'});
    this.tableParam = { ...this.tableParam, plateNumber: "", carStatus: "", stationName: '' };
    this.initData();
  },
  methods: {
    handleSelectionChange(row) {
      this.selectRow = row;
    },
    handleSubmit (data) {
      this.taskRow = data;
      this.dispatchVisible2 = true;
      queryLogisticsByCarNo({plateNumber: data.plateNumber}).then(res => {
        if (res.code === 1001) {
          this.logisticsList = res.data;
        }
      })
    },
    handleSubmit2 (data) {
      this.taskRow = data;
      this.dispatchVisible = true;
    },
    /**
     * @Description: 批量修改状态
     * @param {*} data
     * @Author: wangwangwang
     */
    changeCarType() {
      if (!this.selectRow.length) {
        this.$message.warning('请选择要修改的数据');
        return
      }
      this.changeVisible = true;
    },
    /**
     * @Description: 泵机任务
     * @param {*}
     * @Author: wangwangwang
     */
    handleTask () {
      const params = {
        page: this.page3,
        pageSize: 10,
      }
      getTaskList(params).then(res => {
        if (res.code === 1001) {
          this.taskList = res.data.data;
          this.total3 = res.data.totalRows;
        }
      })
    },
    dispatchSubmit () {
      const params = {
        id: this.taskRow.id,
        dispatchCar: this.dispatchForm.dispatchCar,
        dispatchRemark: this.dispatchForm.dispatchRemark,
      }
      this.$refs.form1.validate((valid) => {
        if (valid) {
          dispatchCar(params).then(res => {
            if (res.code === 1001) {
              this.$message.success('调度成功');
              this.handleTask();
              this.dispatchVisible = false;
              this.initData();
            }
          })
        }
      });
    },
    dispatchSubmit2 () {
      this.$refs.form2.validate((valid) => {
        if (valid) {
          let params = {};
          if (this.dispatchForm2.dispatchType === 1) {
            const newData = this.logisticsList.find(item => item.code === this.dispatchForm2.logisticsCode);
            params = {
              dispatchType: this.dispatchForm2.dispatchType,
              oldCarNo: this.taskRow.plateNumber,
              engineeringId: newData.engineeringId,
              engineeringName: newData.engineeringName,
              engineeringAddress: newData.place,
              structuralParts: newData.structuralParts,
              logisticsCode: this.dispatchForm2.logisticsCode,
              newCarNo: this.dispatchForm2.newCarNo,
              num: this.dispatchForm2.num,
              recAddress: '',
              declareAddress: '',
              carId: this.taskRow.id,
            }
          } else if (this.dispatchForm2.dispatchType === 2) {
            params = {
              dispatchType: this.dispatchForm2.dispatchType,
              dispatchStationId: this.dispatchForm2.dispatchStationId,
              dispatchStation: this.stationIdlist.find(item=>item.id === this.dispatchForm2.dispatchStationId).name,
              carId: this.taskRow.id,
            }
            if(this.dispatchForm2.dispatchStationId === '-10000') {
              params.dispatchStationId = ''
            }
          }
          handleDispatch(params).then(res => {
            if (res.code === 1001) {
              this.$message.success('调度成功');
              this.dispatchVisible2 = false;
              this.initData();
            }
          })
        }
      });
    },
    changeStatus (values) {
      const params = {
        statusList: values
      }
      queryCarListByStatus(params).then(res => {
        if (res.code === 1001) {
          this.carList = res.data;
        }
      })
    },
    sureSubmit () {
      if (!this.carStatus) {
        this.$message.warning('请选择状态');
        return
      }
      const idList = this.selectRow.map(item => item.id);
      const params = {
        carStatus: this.carStatus,
        idList,
      }
      batchUpdateStatus(params).then(res => {
        if (res.code === 1001) {
          this.$message.success('修改成功');
          this.changeVisible = false;
          this.initData();
        }
      })
    },
    handleHistory(data) {
      this.carId = data.id;
      this.historyVisible = true;
      this.initHistoryData();
    },
    handleCancel (data) {
      this.$confirm("确定取消绑定?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        cancelButtonClass: 'bottom_all_two',
        confirmButtonClass: 'bottom_all',
        type: "warning",
      }).then(() => {
        cancelBingding({ carNo: data.plateNumber }).then(
          (res) => {
            if (res.code == 1001) {
              this.$message({
                type: "success",
                message: "取消成功!",
              });
              this.initData();
            }
          }
        );
      })
    },
    initHistoryData() {
      const params = {
        id: this.carId,
        page: this.page2,
        pageSize: 10,
      }
      queryTankerRecord(params).then(res => {
        if (res.code === 1001) {
          this.historyList = res.data.data;
          this.total2 = res.data.totalRows;
        }
      })
    },
    /*重置数据,此方法必须存在，并且方发只重置条件*/
    init() {
      this.tableParam.plateNumber = "";
      this.tableParam.stationName = "";
      this.tableParam.carStatus = "";
      this.initData();
    },
    initData() {
      getCarList({ ...this.tableParam }).then(res => {
        if (res.code === 1001) {
          this.tableDataSource = res.data.data;
          this.total = res.data.totalRows;
        }
      })
    },
    pagessubmitFromDate() {
      let _this = this;
      _this.$refs.reffromDate.validate((valid) => {
        if (valid) {
          _this.submitFromDate();
        } else {
          return false;
        }
      });
    },
    sizeChange(value) {
      this.tableParam.pageSize = value;
      this.initData();
    },
  },
};
</script>

<style lang="scss" scoped>
.el-input,
.el-select {
  width: 240px;
}
.table_link {
  margin: 0 10px;
  color: $bg_color;
  cursor: pointer;
}

.table_link:hover {
  opacity: 0.8;
}
</style>
